<template>
	<view class="container">
		<view class="content">
			<view class="title">{{articleData.title}}</view>
			<view class="time">{{articleData.create_time}}</view>
			<view class="desc">
				<rich-text :nodes="htmlNodes" style="text-indent:1em;line-height: 54rpx;"></rich-text>
			</view>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
import { getArticleList,getArticleDetail } from '@/api/article.js'
export default {
	data() {
	  return {
		 article_id:0,
		 articleData:{},
		 htmlNodes:''
	  }
	},
	onLoad(option) {
		if(option.id){
			this.article_id = option.id;
			this.getArticleFunc();
		}
	},
	onShow() {
		
	},
	methods:{
		getArticleFunc(){
			getArticleDetail({id:this.article_id}).then(res=>{
				if(res.code == 0){
					this.articleData = res.data;
					this.htmlNodes = res.data.descript;
					this.htmlNodes= this.imgDesc(this.htmlNodes);
				}else{
					this.articleData = {};
				}
			})
		},
		imgDesc(html){
			if(html == ''){
				return html;
			}
		  // return str.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin-top:10px"');
			html = html.replace(/style=""/gi,'');
			html = html.replace(/<p>/gi,"<p style='width:100%'>");
			// html = html.replace(/<\/p>/gi,'');
			let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
			    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			    return match;
			  });
			  newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
			    match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
			    return match;
			  });
			  // newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			  newContent = newContent.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin-top:0;margin-bottom:7px;"');
			  return newContent;
		}
	}
}
</script>

<style>
	page{
	   background: #fff;
	  /* background: #e1e1e1; */
	}
	.container{
		padding: 28rpx 20rpx;
	}
	.content{
		
		border-radius: 16rpx;
		padding: 0rpx 24rpx;
		color: #000;
	}
	.title{
		font-size: 30rpx;
		font-weight: 600;
	}
	.time{
		font-size: 28rpx;
		margin-top: 10rpx;
		color: #959494;
	}
	.desc{
		margin-top: 28rpx;
	}
	.desc p{
		
	}
</style>